﻿(function() {
$(document).ready(function() { 	
	
	var i = 0;
	
	/* Table Article initialisation */
	var articleTable = $('#articletableau').dataTable( {
		"bProcessing": true,
        "sAjaxSource": BASE_URL+"admin/getarticles",
        "aoColumns": [
            { "mData": "id" },
			{ "mData": "categorieid" },
            { "mData": "nom" },
			{ "mData": "description" },
            { "mData": "prix" },
            { "mData": "categorie"},
            { "mData": "photo"},
            { "mData": "statut"}
        ],
		"aoColumnDefs": [
                        { "bVisible": false, "aTargets": [ 0 ] },
						{ "bVisible": false, "aTargets": [ 1 ] },
					    { "sWidth": "45%","aTargets": [ 2 ] },
						{ "bVisible": false, "aTargets": [ 3 ] },
						{ "sWidth": "15%","aTargets": [ 4 ] },
	                    { "sWidth": "30%","aTargets": [ 5 ] },
	                    { "bVisible": false, "aTargets": [ 6 ] },
	                    { "sWidth": "10%","aTargets": [ 7 ] }
                    ],
		"oLanguage": {
					"sUrl": BASE_URL+"file/datatable.txt"
			  },
		"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
		"sWrapper": "dataTables_wrapper form-inline",
		"sPaginationType": "bootstrap"
	} );
	
	$('#couleurarticle').ColorPicker({
		onBeforeShow: function () {
			$('.colorpicker').css('z-index','1120');
		},
		color: '#0000ff',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#couleurarticle').val(hex);
		},
		onSubmit: function(hsb, hex, rgb, el) {
			$('#couleurarticle').val(hex);
			$('#couleurarticle').ColorPickerHide();
		}
	});
	
	
	$("#articletableau tbody tr").live('click', function( e ) {
	
		articleTable.$('tr.row_selected').removeClass('row_selected');
        $(this).addClass('row_selected');
			
		//On reset le form
		resetform($('#formarticle'),$('#errorArticle'),"#127874");
		
		//On préremplie le formulaire
		var data = articleTable.fnGetData( this );
		$('#idarticle').val(data.id);
		$('#categoriearticle').val(data.categorieid);
		$('#nomarticle').val(data.nom);
		$('#descriptionarticle').val(data.description);
		$('#prixarticle').val(data.prix);
		$('#photo').val(data.photo);
		
		//Temporaire pour eviter l'erreur lors du submit du form (required)
		$('#couleurarticle').val("000000");
		
		//On gère la dialogBox
		$('#dialogarticle').width('800px');
		$('#dialogarticle').css('margin-left','-400px');
		$('#photocontainer').css('display','block');
		var img = "<img src='"+BASE_URL+$('#photo').val()+"?i="+i+"'/>";
		i = i + 1;
		$("#photocontainer").html(img);
		$(".photocontainer").show();
		
		$('#addArticleContainer').hide();
		$('#editArticleContainer').show();
		
		//Couleur
		$('#photocouleur').val(data.photo);
		$('#couleurarticle').parent().hide();
		$('#file_upload').parent().hide();
		$.ajax({
			type: "POST",
			url: BASE_URL+"admin/couleurs",
			data: {idarticle:data.id},
			beforeSend: function () {
				
			},
			success: function(data, textStatus, jqXHR) {
				$('.couleur').html(data);
				
				//Si il y qu'une couleur on cache le supprimer couleur
				if($('.couleur ul li').eq(1).length > 0)
				{
					$('#deleteCouleur').show();
				}
				else
				{
					$('#deleteCouleur').hide();
				}
				
				$('#dialogarticle').modal('show');
				$('.couleur ul').find('li').eq(0).addClass('selected');
			     var idcouleur= $('.couleur ul').find('li').eq(0).find('span').text();
				$('#idcouleur').val(idcouleur);
				
				$('.couleur ul li').each(function()
				{
					$(this).live('click',function(e)
					{
						e.preventDefault();
						$('.couleur ul .selected').removeClass('selected');
				        $(this).addClass('selected');
				        
				        var idcouleur= $(this).find('span').text();
						$('#idcouleur').val(idcouleur);
						
				        $.ajax({
							type: "POST",
							url: BASE_URL+"admin/getphoto",
							data: {idarticle:$('#idarticle').val(),
								  idcouleur:idcouleur
							},
							beforeSend: function () {
								$("#photocontainer").hide();
								$('#loadphoto').show();
							},
							success: function(data, textStatus, jqXHR) {
								$('#loadphoto').hide();
								
								var img = "<img src='"+BASE_URL+data.photo+"?i="+i+"'/>";
								i = i + 1;
								$("#photocontainer").html(img);
								$("#photocontainer").show();
								
								//On met dans photocouleur la photoactuel
								$('#photocouleur').val(data.photo);
							}
						});
				        
					});
				});
			}
		});
		
    });
	
	
	$('#addCanevasArticle').live('click',function(e)
	{
		e.preventDefault();
		$('#addArticleContainer').show();
		$('#editArticleContainer').hide();
		
		$('#dialogarticle').width('auto');
		$('#dialogarticle').css('margin-left','-250px');
		$(".photocontainer").hide();
		
		
		$('#couleurarticle').parent().show();
		$('#file_upload').parent().show();
		
		resetform($('#formarticle'),$('#errorArticle'),"#127874");
		
		$('#dialogarticle').modal('show');
	});
	
	$('#addArticle').live('click',function(e)
	{
		e.preventDefault();
		$('#actionarticle').val('add');
		renamePhoto("photos","art_"+$('#couleurarticle').val(),$('#nomarticle'), $('#extension'),$('#photo'));
		$('#successArticle').html('Votre article a été ajouté');
		$("#formarticle").submit();
	});
	
	$('#cancelAddArticle').live('click',function(e)
	{
		e.preventDefault();
		$('#dialogarticle').modal('hide');
	});
	
	$('#editArticle').live('click',function(e)
	{
		e.preventDefault();
		$('#actionarticle').val('edit');
		$('#successArticle').html('Votre article a été modifié');
		$("#formarticle").submit();
	});
	
	$('#deleteArticle').live('click',function(e)
	{
		e.preventDefault();
		
		//On cache la premiere DialogBox
		$('#dialogarticle').modal('hide');
		
		//On demande Confirmation
		$('#confirmdeletearticle').modal('show');
	});
	
	$('#ValiddeleteArticle').live('click',function(e)
	{
		e.preventDefault();
		$('#actionarticle').val('delete');
		$('#successArticle').html('Votre article a été supprimé');
		$("#formarticle").submit();
		$('#confirmdeletearticle').modal('hide');
	});
	
	$('#CanceldeleteArticle').live('click',function(e)
	{
		e.preventDefault();
		$('#confirmdeletearticle').modal('hide');
	});
	
	$("#formarticle").live('submit',function(e) {
		e.preventDefault(); // stop the form being submit on click
			
		//On remet la couleur sur chaque des bordures input
		reInitCouleurlabel($(this), "#127874");
					
		//On réinitialise les message d'erreurs
		$('#errorArticle').html("");
			
		var formulaire = $(this);
		//On récupère l'action du form
		var url = $(this).attr("action");    
					
		$.ajax({
				type: "POST",
				url: url,
				data: $(this).serialize(), //On sérialize les datas du form
				beforeSend: function () {
					//On affiche la load gif
					if($('#actionarticle').val() == 'delete')
					{
						$("#loadupload").show();
					}
					else
					{
						$("#loadarticle").show();
					}
				},
				success: function(data, textStatus, jqXHR) {
						
				//On hide la load gif
				if($('#actionarticle').val() == 'delete')
				{
					$("#loadupload").hide();
				}
				else
				{
					$("#loadarticle").hide();
				}
						
				//Si la validation passe
				if(data == "true")
				{
					//On cache le form
					$('#dialogarticle').modal('hide');
					
					if($('#nomphoto').val() !=  '')
					{
						$("#file_upload").uploadify("settings", 'formData', {'titrephoto':$('#photo').val()});	
						//On upload le file
						$('#file_upload').uploadify('upload');
					}
					else
					{
						//On reload la table actuelle
						articleTable.fnReloadAjax();
						
						//On Reset le Form
						resetform(formulaire,$('#errorArticle'),"#127874");
							
						//On affiche un message de succès
						$('#successArticle').show();
						setTimeout(function() {
							$('#successArticle').hide();
						}, 5000);
					}
				}
				//Si la validation échoue
				else
				{
					$('#errorArticle').show();
					res = $.parseJSON(data);
					for (var id in res) {
						$('#'+id).prev().css('color','red');
							for(var id2 in res[id]) {
								if($('#errorArticle').text() == "")
								{
									//On affiche un message d'erreur
									$('#errorArticle').css('display','block');
									$('#errorArticle').append(res[id][id2]);
								}
							}
						}
				}
				}
		});
	});
	
	$('#file_upload').uploadify({
		'method'   : 'post',
        'swf'      : BASE_URL+'flash/uploadify.swf',
		'fileSizeLimit' : '0',
        'uploader' : BASE_URL +'admin/upload',
		'onUploadError' : function(file, errorCode, errorMsg, errorString) {
				alert('The file ' + file.name + ' a eu un problème : ' + errorString +'"\n"'+errorMsg);
		} ,
        'onUploadComplete' : function(file) {
				
				$('#loadupload').hide();
				//On reload la table actuelle
				articleTable.fnReloadAjax();
						
				//On Reset le Form
				resetform($('#formarticle'),$('#errorArticle'),"#127874");
							
				//On affiche un message de succès
				$('#successArticle').show();
				setTimeout(function() {
							$('#successArticle').hide();
				}, 5000);
		},
		'onUploadSuccess' : function(file, data, response) {
				console.log(data);
				//alert(response);
			},
		'onSelect' : function(file) {
				checkExtensionPhoto(file.name, $('#extension'),$('#errorArticle'), $('#nomphoto'));
		    }, 
		'onInit'   : function(instance) {
			
				$('#file_upload').css('width','100%');
				$('#file_upload').prepend('<div class="mylabel"><span>Photo :</span></div><input id="nomphoto" name="nomphoto" type="text" class="myinput" value=""/>');
				$('#file_upload').append('<div class="clearfix"></div>');
				
				$('#file_upload .swfupload').css('margin-left',-$('#file_upload-button').width());
				
				$('#file_upload-queue').css('display','none');
			},
		 'onUploadStart' : function(file) {
				$('#loadupload').show();
			},
			'buttonClass':'mybutton',
			'buttonText' : 'parcourir...',
			'queueID'  : 'photo_queue',
			'multi':false,
			'auto': false
	});
	
	/******************** Gestion Couleur ******************/
	
	
	$('#couleur').ColorPicker({
		onBeforeShow: function () {
			$('.colorpicker').css('z-index','1120');
		},
		color: '#0000ff',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#couleur').val(hex);
		},
		onSubmit: function(hsb, hex, rgb, el) {
			$('#couleur').val(hex);
			$('#couleur').ColorPickerHide();
		}
	});
	
	// Ajout
	$('#addCanevasCouleur').live('click',function(e)
	{
		e.preventDefault();
		$('#dialogarticle').modal('hide');
		
		$('#addCouleurContainer').show();
		$('#editCouleurContainer').hide();
		
		$('#couleur').val('');
		$('#dialogcouleur').width('auto');
		$("#photocontainercouleur").hide();
		$('#dialogcouleur').modal('show');
	});
	
	$('#addCouleur').live('click',function(e)
	{
		e.preventDefault();
		$('#actioncouleur').val('add');
		$('#idarticlecouleur').val($('#idarticle').val());
		renamePhoto("photos","art_"+$('#couleur').val(),$('#nomarticle'), $('#extensioncouleur'),$('#photocouleur'));
		
		$('#successCouleur').html('Votre couleur a été ajoutée');
		$("#formcouleur").submit();
	});

	$('#cancelAddCouleur').live('click',function(e)
	{
		e.preventDefault();
		$('#dialogcouleur').modal('hide');
		$('#dialogarticle').modal('show');
	});
	
	//Modification

	$('#editCanevasCouleur').live('click',function(e)
	{
		e.preventDefault();
		$('#dialogarticle').modal('hide');
		
		//On redimensionne la dialogbox
		$('#dialogcouleur').width('800px');
		
		$('#idarticlecouleur').val($('#idarticle').val());
		
		//On préremplit le couleur picker
		var color = $('.couleur ul').find('.selected').css('background-color');
		color = rgb2hex(color);
		var hex = color.replace('#','');
		$('#couleur').val(hex);
		$('#couleur').ColorPickerSetColor(color);
		
		//On affiche l'image
		var img = "<img src='"+BASE_URL+$('#photocouleur').val()+"?i="+i+"'/>";
		i = i + 1;
		$("#photocontainercouleur").html(img);
		$("#photocontainercouleur").show();
		
		$('#addCouleurContainer').hide();
		$('#editCouleurContainer').show();
		
		$('#dialogcouleur').modal('show');
	});
	
	$('#editCouleur').live('click',function(e)
	{
		e.preventDefault();
		//On met dans action la valeur edit
		$('#actioncouleur').val('edit');
		if($('#nomphotocouleur').val() !=  '')
		{
			renamePhoto("photos","art_"+$('#couleur').val(),$('#nomarticle'), $('#extensioncouleur'),$('#photocouleur'));
		}
		$("#formcouleur").submit();
		
		$('#successCouleur').html('Votre couleur a été modifiée');
	});
	
	$('#cancelEditCouleur').live('click',function(e)
	{
		e.preventDefault();
		$('#dialogcouleur').modal('hide');
		$('#dialogarticle').modal('show');
	});
	
	$('#deleteCouleur').live('click',function(e)
	{
		e.preventDefault();
		
		$('#couleur').val("000000");
		$('#idarticlecouleur').val($('#idarticle').val());
		
		//On cache la premiere DialogBox
		$('#dialogarticle').modal('hide');

		//On demande Confirmation
		$('#confirmdeletecouleur').modal('show');
	});
	
	$('#ValiddeleteCouleur').live('click',function(e)
	{
		e.preventDefault();
		$('#actioncouleur').val('delete');
		$('#successCouleur').html('Votre couleur a été supprimée');
		$("#formcouleur").submit();
		$('#confirmdeletecouleur').modal('hide');
		$('#dialogarticle').modal('show');
	});
	
	$('#CanceldeleteCouleur').live('click',function(e)
	{
		e.preventDefault();
		$('#confirmdeletecouleur').modal('hide');
	});
	
	
	$("#formcouleur").live('submit',function(e) {
		e.preventDefault(); // stop the form being submit on click
			
		//On remet la couleur sur chaque des bordures input
		reInitCouleurlabel($(this), "#127874");
					
		//On réinitialise les message d'erreurs
		$('#errorCouleur').html("");
			
		var formulaire = $(this);
		//On récupère l'action du form
		var url = $(this).attr("action");    
					
		$.ajax({
				type: "POST",
				url: url,
				data: $(this).serialize(), //On sérialize les datas du form
				beforeSend: function () {
					//On affiche la load gif
					if($('#actioncouleur').val() == 'delete')
					{
						$("#loadarticle").show();
					}
					else
					{
						$("#loadcouleur").show();
					}
				},
				success: function(data, textStatus, jqXHR) {
						
				//On hide la load gif
				if($('#actioncouleur').val() == 'delete')
				{
					$("#loadarticle").hide();
				}
				else
				{
					$("#loadcouleur").hide();
				}
						
				//Si la validation passe
				if(data == "true")
				{
					//On cache le form
					$('#dialogcouleur').modal('hide');
					
					//Si on veut upload une photo
					if($('#nomphotocouleur').val() !=  '')
					{
						console.log("upload");
						$("#file_upload_couleur").uploadify("settings", 'formData', {'titrephoto':$('#photocouleur').val()});	
						//On upload le file
						$('#file_upload_couleur').uploadify('upload');
					}
					else
					{
						console.log("pas d'upload");
						//On reclique sur la ligne
						$('#articletableau tbody .row_selected').click();
							
						//On Reset le Form
						resetform(formulaire,$('#errorCouleur'),"#127874");
							
						//On affiche un message de succès
						$('#successCouleur').show();
						setTimeout(function() {
							$('#successCouleur').hide();
						}, 5000);
					 }
				}
				//Si la validation échoue
				else
				{
					$('#errorCouleur').show();
					res = $.parseJSON(data);
					for (var id in res) {
						$('#'+id).prev().css('color','red');
							for(var id2 in res[id]) {
								if($('#errorCouleur').text() == "")
								{
									//On affiche un message d'erreur
									$('#errorCouleur').css('display','block');
									$('#errorCouleur').append(res[id][id2]);
								}
							}
						}
				}
				}
		});
	});
	
	
	$('#file_upload_couleur').uploadify({
		'method'   : 'post',
        'swf'      : BASE_URL+'flash/uploadify.swf',
		'fileSizeLimit' : '0',
        'uploader' : BASE_URL +'admin/upload',
		'onUploadError' : function(file, errorCode, errorMsg, errorString) {
				alert('The file ' + file.name + ' a eu un problème : ' + errorString +'"\n"'+errorMsg);
		} ,
        'onUploadComplete' : function(file) {
				$('#loadupload').hide();
		
				//On reclick sur la ligne
				$('#articletableau tbody .row_selected').click();
							
				//On Reset le Form
				resetform($('#formcouleur'),$('#errorCouleur'),"#127874");
							
				//On affiche un message de succès
				$('#successCouleur').show();
				setTimeout(function() {
					$('#successCouleur').hide();
				}, 5000);
			},
		'onUploadSuccess' : function(file, data, response) {
				console.log(data);
				//alert(response);
			},
		'onSelect' : function(file) {
				checkExtensionPhoto(file.name, $('#extensioncouleur'),$('#errorCouleur'), $('#nomphotocouleur'));
		    }, 
		'onInit'   : function(instance) {
			
				$('#file_upload_couleur').css('width','100%');
				$('#file_upload_couleur').prepend('<div class="mylabel"><span>Photo :</span></div><input id="nomphotocouleur" name="nomphoto" type="text" class="myinput" value=""/>');
				$('#file_upload_couleur').append('<div class="clearfix"></div>');
				
				$('#file_upload_couleur .swfupload').css('margin-left',-$('#file_upload-button').width());
				
				$('#file_upload_couleur-queue').css('display','none');
			},
		 'onUploadStart' : function(file) {
				$('#loadupload').show();
			},
			'buttonClass':'mybutton',
			'buttonText' : 'parcourir...',
			'queueID'  : 'photo_queue',
			'multi':false,
			'auto': false
	});
	
}); 
})( jQuery );